﻿@model LeadVinaglue.Models.ViewPages.UserManagementModel
           
@{
    ViewBag.Title = "Quản lý người dùng";
    Layout = "~/Views/Shared/_Layout.Management.cshtml";
}

<h2 class="app">
	<strong>Quản lý người dùng</strong>
</h2>
<div class="title nomargin">
    <span class="right-btns">
        <input id="searchKeyword" type="text" class="text spl search filter" style="margin-top: -1px;" data-bind="value: Keywords, event: { keypress: RunSomethingKey }" />
        <a href="#" class="btn btn-go" data-bind="click: SearchButton">Go</a>
        <span class="v-line"></span>
        <a href="/Management/UserList/AddUser">Thêm mới &raquo;</a>
    </span>
	<h3>Xem người dùng</h3>
</div>
<span class="paging">
    <span class="pageleft">                
        <span class="total" data-bind='text: PageText'></span>
        <span class="show">Hiển thị <input type="text" class="text" readonly="readonly" id="pagesize" data-bind='value: PageSize' /> trên trang <span class="smallText error-red" data-bind="text: PageSizeText"></span> </span>
    </span>
    <span class="pages">
        <span class="smallText error-red" data-bind="text: PageCurrentText"></span>Trang <input type="text" class="text" id="pagecurrent" data-bind='value: CurrentPageIndex, event: { keypress: RunSomethingKey }' /> của <span data-bind='text: MaxPageIndex' class="totalpages"></span>
        <a href="#" data-bind="click: PrevPage, attr: {'class': PrevButtonClass}">Prev </a>
  		<a href="#" data-bind="click: NextPage, attr: {'class': NextButtonClass}">Next </a>
    </span>
</span>

<table class="tablegrid" cellspacing="0" border="0">
    <thead>
        <tr class="title">        
		    <th>
                <span class="w" style="height:22px">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "Fullname")}'>Tên thành viên</a>
                    <div class="sort_wrapper" id="Fullname">  
                        <span class="grid_order ui_icon"></span>
                    </div>                                        
                </span>
            </th>   
		    <th>
                <span class="w" style="height:22px">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "Email")}'>E-mail</a>
                    <div class="sort_wrapper" id="Email">  
                        <span class="grid_order ui_icon"></span>
                    </div>                                        
                </span>
            </th> 
		    <th class="datetime centeralign">
                <span class="w" style="height:22px">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "CreationDate")}'>Ngày tạo</a>
                    <div class="sort_wrapper" id="CreationDate">  
                        <span class="grid_order ui_icon"></span>
                    </div>                                        
                </span>
            </th>
		    <th class="centeralign">
                <span class="w" style="height:22px">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "NumLogin")}'>Lượt</a>
                    <div class="sort_wrapper" id="NumLogin">  
                        <span class="grid_order ui_icon"></span>
                    </div>              
                </span>
            </th>
		    <th class="active centeralign">
                <span class="w" style="height:22px">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "IsApproved")}'>Approved</a>
                    <div class="sort_wrapper" id="IsApproved">  
                        <span class="grid_order ui_icon"></span>
                    </div>              
                </span>
            </th>
		    <th class="active centeralign">
                <span class="w" style="height:22px">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "IsLockedOut")}'>LockedOut</a>
                    <div class="sort_wrapper" id="IsLockedOut">  
                        <span class="grid_order ui_icon"></span>
                    </div>              
                </span>
            </th>
		    <th class="active centeralign">
                <span class="w" style="height:22px">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "Active")}'>Active</a>
                    <div class="sort_wrapper" id="Active">  
                        <span class="grid_order ui_icon"></span>
                    </div>              
                </span>
            </th>
            <th class="active centeralign">
                <span class="w">Trạng thái</span>
            </th>
		    <th class="last centeralign"><span class="w">Xóa</span></th>
        </tr>
    </thead>
    
    <tbody data-bind="foreach: Accounts">
        <tr class="line" data-bind="attr: {'class': Active? 'line': 'line new'}">
		    <td>
                <span class="w"><a class="preview" data-bind='text: Fullname, attr: {href: "/Management/UserList/EditUser/" + ID, onclick: "OpenUserPreview(" + ID + ")"}'></a></span>
            </td> 
            <td>
                <span class="w"><a data-bind='text: Email, attr: {href: "mailto:" + Email}'></a></span>
            </td>
            <td class="datetime centeralign">
                <span class="w" data-bind='text: CreationDate'></span>
            </td>
		    <td>
                <span class="w red" data-bind='text: NumLogin'>
                </span>
            </td>
            <td class="active centeralign">
                <span class="w">
                    <input type="checkbox" name="IsApproved" disabled="disabled" data-bind="checked: IsApproved" />
                </span>
            </td>
            <td class="active centeralign">
                <span class="w">
                    <input type="checkbox" name="IsLockedOut" disabled="disabled" data-bind="checked: IsLockedOut" />
                </span>
            </td>
            <td class="active centeralign">
                <span class="w">
                    <input type="checkbox" name="Active" disabled="disabled" data-bind="checked: Active" />
                </span>
            </td>
		    <td class="active centeralign">
                <span class="w">
                    <span data-bind="text: Status, attr: {id: 'status' + ID, 'class': Active? 'green': ''}"></span>
                </span>
            </td>
		    <td class="last centeralign">
                <span class="w" style="min-height: 24px;"><a class="btn btn-x" href="##" data-bind='attr: {id: "account" + ID, rel: Fullname, onclick: "DeleteDialog(" + ID + ")"}'>Delete</a></span>
            </td>
	    </tr>
    </tbody>
</table>
      
@Html.Partial("_PartialUserPreview")
@Html.Partial("_PopupConfirmLocked")   
@Html.Partial("_PopupConfirmDeleted") 

<script type="text/javascript">
    var data = @(Html.Raw(Json.Encode(Model)));
</script>
<script src="/Scripts/viewModel/usergrid.js" type="text/javascript"></script> 